<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>


        <select name="" onchange="select(this)">
            <option value="1">题目一</option>
            <option value="2">题目二</option>
            <option value="3">题目三</option>
            <option value="4">题目四</option>
        </select>

        <div>

            <div id="div1">内容一

                </div>

            <div id="div2" style="display:none">内容二

                </div>

            <div id="div3" style="display:none">内容三

                </div>

            <div id="div4" style="display:none">内容四

                </div>

        </div>
        <hr>





        <script>
            //我试过，内容标签只能用id，不能用class.
            //而且js的文件名不能为select。
            function select(obj) {
                //找到内容的标签 + 点击select获得的value值，让它显示，再让他的兄弟标签隐藏。
                $("#div" + obj.value).show().siblings().hide();

            }
        </script>




            <p>在某个域被使用或改变时，它会改变颜色。</p>

            <p>Car:
                <select class="field" id="field" name="cars">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                </select>
        </body>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#field").change(function() {
                    $("#field").css("background-color", "#FFFFCC");
                    alert( 'you selected  '+  $("#field").val());
                });
            });
        </script>
</html>
